import axios from "axios"
import AxisChart from "../Charts/AxisChart";
import {DataSource, IDataSource,effect} from "@/index"

function getData(params:any){
    return  axios.get("https://www.fastmock.site/mock/f0ae2cb1541305cefa1b7d31b3cc6d13/api/api/getDataList",params);
}
const dataSourceTarget: IDataSource = {
    dataFn: getData,
    mateDataFn: getData
}
const chart1 = new AxisChart({
    title:"我看起来是chart1，其实已经重绘到chart2.点击按钮联动我右边的chart3"
}, new DataSource(dataSourceTarget));
chart1.create((chartTarget,dataSource)=>{
    const container = document.getElementById("container2");
    const innerSpan = document.createElement("div");
    const innerButton = document.createElement("button");
    if(container){
        container.innerHTML = "";
        container.append(innerSpan);
        container.append(innerButton);
    }
    innerButton.innerText="点我控制chart2的图表切换"
    innerButton.addEventListener("click",function(){
        chartTarget?.setConfig("title","在用户看起来我依然是chart1，我跟chart1在一个位置上，但我是chart2");
        dataSource?.setFilter({id:1})
    },false);
    effect(()=>{
        innerSpan.innerHTML = chartTarget?.getConfig("title")||"空空如也";
    },[chartTarget]);

    effect(()=>{
        innerSpan.innerHTML = chartTarget?.getConfig("title")||"空空如也";
    },[dataSource]);
});

export default chart1;